
let recommen = document.getElementById('recommen')
let btn = document.getElementById('btn')
let num = 0

//4.1、国内折扣列表功能界面

function render(currentArr) {
    
    currentArr.forEach(item => {
        // console.log(item);
        let div = document.createElement('a')//内容区域最外层盒子
        div.href=`inlandproductlist.html?a=${item.productId}` //href带过去的地址和变量
        div.id = "shop"
        let img = document.createElement("a")//图片放置
        img.innerHTML = item.productImg
        // img.href=item.productInfo1//评论的超链接
        let intro = document.createElement("div") //下方放置产品信息的盒子
        intro.innerHTML = item.productName
        intro.style.fontWeight = "800" //商品信息加粗
        let price = document.createElement("span")  //放置价格
        price.innerHTML = item.productPrice
        price.style.color = "red" //字体颜色
        let source = document.createElement('div') //放置最下面的来源事件等信息
        source.style.color = "#999"
        source.innerHTML = `${item.productFrom} | ${item.productTime}`
        div.appendChild(img)
        div.appendChild(intro)
        div.appendChild(price)
        div.appendChild(source)
        recommen.appendChild(div)
    });
    
}


function fn(num) {
  
    ajax({
        url: "http://chst.vip:1234/api/getinlanddiscount",
        success(res) {

            let currentArr = res.result.splice(0,8);
          
            render(currentArr)
          
            let count = 2;
            console.log(count);
             
            recommen.onscroll = function () {
                
                //获取关键的三个指标
                // let clientHeight = document.documentElement.clientHeight;
                let clientHeight = recommen.clientHeight;
                console.log(clientHeight);
                // let scrollHeight = document.documentElement.scrollHeight;
                let scrollHeight = recommen.scrollHeight;
                console.log(scrollHeight);
                // let scrollTop = document.documentElement.scrollTop;
                let scrollTop = recommen.scrollTop;
                console.log(scrollTop);
                //计算阈值
                let threshold = scrollHeight - (scrollTop + clientHeight);

                if (threshold <= 10) {//如果滚动条快接到达底部了
                    // console.log(threshold)
                    count += 2 //让count++
                    // console.log(count);
                    let currentArr =res.result.splice(0, count);
                    //再去请求返回的数组中截取内容
                    // console.log(currentArr);
                    if (count >= res.length - 1) {//如果截取的内容超出了后台返回数据的数量
                        return //啥也不做
                    }
                    render(currentArr)

                }
                btn.onclick = function() {

                    //加入动画过度效果
                    console.log(111);
                //         document.querySelector('#recommen').scrollTop = 0
                // let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    let timer = setInterval(() => {
                       document.querySelector('#recommen').scrollTop -=20
                        if (document.querySelector('#recommen').scrollTop <= 0) {
                            clearInterval(timer)
                        }
                    },10)
               
                      
                    }
            }

        }
    })

} fn(num)



